<template>
  <div id='app'>
    <router-view />
    <vue-fab :hidden='hiddenFab' fabAnimateBezier='ease-in-out' :mainBtnColor='mainBtnColor' icon='icon-wode-01'
      size='big' fabItemAnimate='alive'>
      <fab-item v-for='(item, idx) in menu' :key='idx' :idx='idx' :title='item.title' :color='item.color'
        :icon='item.icon' @clickItem='clickItem' />
    </vue-fab>
  </div>
</template>
<script>
export default {
  data() {
    return {
      menu: [
        {
          icon: 'icon-shouye-01',
          title: '返回首页',
          color: '#869ab8'
        }
      ],
      mainBtnColor: '#324157',
      hiddenFab: true // 隐藏fab

    }
  },
  watch: {
    $route(to, from) {
      if (to.path === '/index') {
        this.hiddenFab = true
      } else {
        this.hiddenFab = false
      }
    }
  },
  created() {
  },
  methods: {
    clickItem: function (item) {
      switch (item.idx) {
        case 0:
          this.$router.push('./')
          break

        default:
          break
      }
    }
  }

}
</script>
<style lang='scss'>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
}
</style>
